<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>排名动画</title>

  <style>
    ul {
      list-style: none;
      position: relative;
      padding: 0;
    }

    ul li {
      width: 100px;
      height: 15px;
      background-color: beige;
      margin-bottom: 4px;
      border: 1px solid #ccc;
      font-size: 12px;
      position: absolute;
    }

    .ranking-item {
      box-shadow: 0 0 0 black;
      opacity: 1;
      transition-duration: 0.3s;
      transition-property: border-radius, box-shadow, height, left, opacity, top;
      transition-timing-function: ease-in-out;
    }

    .ranking-item_moving {
      box-shadow: 6px 6px 12px black;
      left: -1mm;
    }

    #moveUpBtn {
      position: absolute;
      top: 200px;
    }
  </style>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(menuItem,i) in menuList" :key="i" class="item ranking-item" :style="{'top': menuItem.top + 'px'}">
        {{menuItem.menuName}}
      </li>
    </ul>
    
    <button id="moveUpBtn" @click="moveUp">移动排名</button>
    <div style="position: absolute; bottom : 2px;">

      {{menuList}}
    </div>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        menuList: [{
            order: 1,
            menuName: '麻婆豆腐',
            top: 0
          },
          {
            order: 2,
            menuName: '酸菜鱼',
            top: 0
          },
          {
            order: 3,
            menuName: '酸辣土豆丝',
            top: 0
          },
          {
            order: 4,
            menuName: '肉沫蒸蛋',
            top: 0
          },
          {
            order: 5,
            menuName: '酸辣鸡杂',
            top: 0
          }
        ]
      }
    },
    methods: {
      correctPosition: function () {
        this.menuList.forEach((menu, i) => {
          // console.log(menu,i)
          menu.top = (menu.order - 1) * 19;
          // menu.order = i + 1;
        })
      },
      moveUp: function () {
        let self = this;
        let fromIndex = 4;
        let toIndex = 0;
        let ITEM_HEIGHT = 15;
        let $fromItem = $('ul li').eq(4);

        let startY = this.menuList[fromIndex].top + 4;
        let endY = this.menuList[toIndex].top;
        $fromItem.css({
          top: endY + 'px'
        });
        $fromItem.addClass('ranking-item_moving');
        $fromItem.one('transitionend', () => {
          $fromItem.removeClass('ranking-item_moving');

          self.menuList.forEach((menu, i) => {
            if (i === fromIndex) {
              menu.order = 1;
            } else {
              menu.order = menu.order + 1;
            }
          });

          self.correctPosition();
        });
        // });
      }
    },
    mounted() {
      this.correctPosition();

    }
  })

  // 1.变形

  // $(function () {
  //   let start_order = 4;
  //   let end_order = 0;
  //   let ITEM_HEIGHT = 15;
  //   let $fromItem = $('#fromItem');
  //   let $toItem = $('#toItem');

  //   $('#moveUpBtn').click(function () {
  //     let startY = 57;
  //     let endY = 0;
  //     $fromItem.addClass('ranking-item_moving');
  //     $fromItem.css({
  //       top: endY + 'px',
  //       zIndex: 1000
  //     });
  //     $fromItem.one('transitionend', function () {
  //       $fromItem.css({
  //         top: endY + 'px'
  //       });
  //     })
  //   });
  // });
</script>

</html>